/*
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-07-02 15:24:13
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-07-05 11:14:35
 */
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// webpack 中的所有的配置信息都应该写在module.exports中
module.exports = {
  mode: 'production', // 'none' | 'development' | 'production'
  // 指定入口文件
  entry: './src/index.ts',
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    // 打包后文件的文件名
    filename: 'bundle.js',
    // 告诉webpack不使用箭头函数
    environment: {
      arrowFunction: false // 关闭webpack的箭头函数，可选
    }
  },
  optimization: {
    minimize: true // 代码压缩，可选 true 压缩 false 不压缩
  },
  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/, // 匹配已 .ts 结尾的文件
        use: [
          // 配置 babel 
          {
            // 指定加载器
            loader: "babel-loader",
            options: {
              // 设置预定义的环境（预置环境）
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的目标浏览器
                    "targets": {
                      "chrome": "88",
                      "ie": "11"
                    },
                    // 指定 corejs 的版本
                    "corejs": "3",
                    // 使用corejs的方式 “usage” 表示按需加载
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          },
          {
            loader: "ts-loader", // 使用ts-loader处理 .ts 结尾的文件
          }
          /* 这里 复杂配置使用 {}包裹，如上，简单可直接如下面这样写 */
          // "ts-loader", // 使用ts-loader处理 .ts 结尾的文件
        ],
        exclude: /node_modules/, // 要排除的文件
      }
    ]
  },
  // 配置webpack插件
  plugins: [
    new CleanWebpackPlugin(),
    // 自动生成 HTML 文件
    new HTMLWebpackPlugin({
      // title: "这是一个自定义的title"
      template: "./src/index.html"
    }),
  ],
  // 用来设置引用模块
  resolve: {
    extensions: ['.ts', '.js'] // 凡是这里设置的都可以作为模块使用
  }
}